<template>
    <div style="display: flex;flex-direction: column;height: 100%;">
        <el-page-header @back="goBack" content="内容设置" title="设置" style="margin-bottom: 20px;">
        </el-page-header>
        <div
            style="flex: 1;background-color: #EAEEF7;width: calc(100% - 20px);height:100%;padding: 10px;display: flex;flex-direction: column;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="人像" name="personImage"></el-tab-pane>
                <el-tab-pane label="文字" name="text"></el-tab-pane>
                <el-tab-pane label="背景" name="background"></el-tab-pane>
            </el-tabs>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'personImage'
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab.index);
            var path = null
            switch (Number(tab.index)) {
                case 0:
                    path = "/ContentSetting/PersonImage"
                    break;
                case 1:
                    path = "/ContentSetting/FontStyle"
                    break;
                case 2:
                    path = "/ContentSetting/BackgroundStyle"
                    break;
            }
            this.$router.push({
                    path:path
                });
        }
    }
}
</script>

<style scoped></style>